<template>
    <div class="personal-box">
         <h2 class="title">哈哈哈 --- {{x}}</h2>
        <button>按钮</button>
    </div>
</template>

<script>
export default {
    // 设置组件的名字
    name : 'personalInfo', 
    // 在组件中， data用来构建响应式的数据/状态，必须 使用闭包的方式
    data() {
        return {
            x : 10,
            y : 20 
        }
    } ,
    computed : {
        // 计算属性
    } ,
    watch : {
        // 监听器
    },
    filter : {
        // 过滤器
    } ,
    methods : {
        // 方法
    }
}
</script>

<!-- 使用预编译语言 -->
<style lang="less">
    .personal-box {
        width: 100px;
        height: 100px;
        background-color: skyblue;

        .title {
            color: red;
        }
}
</style>